<script setup lang="ts">
import {ref, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowRight, Delete, Edit, Search, Operation} from "@element-plus/icons-vue";
import myAxios from "../service/my-axios.ts";

const searchBlogTitle = ref('')
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(0)
const total = ref(0)
const addBlogFormVisible = ref(false)
const addCommentVisible = ref(false)
const updateBlogFormVisible = ref(false)
const formLabelWidth = '140px'
const title = ref("")
const content = ref("")


onMounted(async () => {
  await handleSearch()
})
const handleSearch = async () => {
  tableData.value = []
  currentPage.value = 1
  let res = await myAxios.get("/blog/search?title=" + searchBlogTitle.value + "&currentPage=" + currentPage.value);
  if (res?.data.code === 0) {
    res.data.data.records.forEach(Blog => {
      tableData.value.push(Blog)
    })
    currentPage.value = res.data.data.current
    pageSize.value = res.data.data.size
    total.value = res.data.data.total
  }
}
const handleCurrentChange = async (val: number) => {
  tableData.value = []
  const url = "/blog/search?title=" + searchBlogTitle.value + "&currentPage=" + val
  let res = await myAxios.get(url);
  if (res?.data.code === 0) {
    res.data.data.records.forEach(Blog => {
      tableData.value.push(Blog)
    })
    currentPage.value = res.data.data.current
    pageSize.value = res.data.data.size
    total.value = res.data.data.total
  }
}
const updateBlogForm = ref({
  id: '',
  title: '',
  content: '',
  likedNum: 0,
  commentsNum: 0
})
const getBlogInfo = async (id: string) => {
  let res = await myAxios.get("/blog/" + id);
  if (res.data.code === 0) {
    updateBlogFormVisible.value = true
    updateBlogForm.value = res.data.data
  } else {
    ElMessage.error(res.data.description)
  }
}
const confirmDelete = (id: string) => {
  ElMessageBox.confirm(
      '此操作无法撤销',
      '确认删除?',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        let res = await myAxios.delete("/blog/" + id);
        if (res.data.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          await handleSearch()
        } else {
          ElMessage.error(res.data.description)
        }
      })
}
const handleAddBlog = async() => {
  addBlogFormVisible.value = false;
  let formData = new FormData();
  formData.append("title", title.value)
  formData.append("content", content.value)
  let res = await myAxios.post("/blog/add", formData, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  });
  if (res.data.code === 0) {
    ElMessage({
      message: res.data.data,
      type: 'success',
    })
    await handleSearch();
  } else {
    ElMessage({
      message: '添加失败',
      type: 'failed',
    })
  }
}
const handleUpdateBlog = async () => {
  const Date1 = {
    id: updateBlogForm.value.id,
    title: updateBlogForm.value.title,
    content: updateBlogForm.value.content,
    likedNum: updateBlogForm.value.likedNum,
    commentsNum: updateBlogForm.value.commentsNum
  }
  let res  = await  myAxios.put("/blog/update", Date1, {
    headers: {
      "Content-Type": "multipart/form-data"
    }})
  if (res.data.code === 0) {
    updateBlogFormVisible.value = false
    ElMessage({
      message: '更新成功',
      type: 'success',
    })
    await handleSearch()
  } else {
    ElMessage.error(res.data.description)
  }
}
const AddCommentForm = ref({
      id: '',
      title: '',
      content1: ''
    }
)
const Comment = async (blogId: number) =>{
  let res = await myAxios.get("/blog/" + blogId);
  if (res.data.code === 0) {
    addCommentVisible.value = true
    AddCommentForm.value = res.data.data
  } else {
    ElMessage.error(res.data.description)
  }
}
const handleAddComment = async() => {
  addCommentVisible.value = false
  const Data = {
    blogId: AddCommentForm.value.id,
    content: AddCommentForm.value.content1
  }
  let res = await myAxios.post("/comments/add", Data);
  if (res.data.code === 0) {
    updateBlogFormVisible.value = false
    ElMessage({
      message: '评论添加成功',
      type: 'success',
    })
    await handleSearch()
  } else {
    ElMessage.error(res.data.description)
  }
}


</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item >首页</el-breadcrumb-item>
    <el-breadcrumb-item>博文管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="请输入标题" v-model="searchBlogTitle" clearable @change="handleSearch">
          <template #append>
            <el-button :icon="Search" @click="handleSearch"/>
          </template>
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="addBlogFormVisible = true">添加博文</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" table-layout="fixed" border stripe>
      <el-table-column label="图片" width="80px" slot-scope="scope">
        <template #default="scope">
          <el-avatar
              :src="scope.row.images"
              :fit="cover"
              shape="square"
              style="width: 50px;height: 50px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"/>
      <el-table-column prop="content" label="正文"/>
      <el-table-column prop="likedNum" label="点赞量"/>
      <el-table-column prop="commentsNum"  label="评论数量"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column fixed="right" label="操作" width="160px" slot-scope="scope">
        <template #default="scope">
          <el-button type="warning" :icon="Operation" circle @click="Comment(scope.row.id)"></el-button>
          <el-button type="primary" :icon="Edit" circle @click="getBlogInfo(scope.row.id)"/>
          <el-button type="danger" :icon="Delete" circle @click="confirmDelete(scope.row.id)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
    />
    <el-dialog v-model="addBlogFormVisible" title="添加博文" width="40%" center>
<!--     -->
      <el-form-item label="标题"  prop="title">
        <el-input v-model="title" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="正文"  prop="content">
        <el-input v-model="content" autocomplete="off"/>
      </el-form-item>


      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addBlogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddBlog">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog v-model="updateBlogFormVisible" title="更新博文" width="40%" center>
      <el-form :model="updateBlogForm">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="updateBlogForm.id" autocomplete="off" disabled/>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth" >
          <el-input v-model="updateBlogForm.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="正文" :label-width="formLabelWidth">
          <el-input v-model="updateBlogForm.content" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="点赞数量" :label-width="formLabelWidth">
          <el-input v-model="updateBlogForm.likedNum" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="评论数量" :label-width="formLabelWidth" >
          <el-input v-model="updateBlogForm.commentsNum" autocomplete="off"/>
        </el-form-item>


      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateBlogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateBlog">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog v-model="addCommentVisible" title="添加评论"  width="40%" center>
      <el-form>
        <el-form-item label="博文id" :label-width="formLabelWidth">
          <el-input v-model="AddCommentForm.id" autocomplete="off" disabled/>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="AddCommentForm.title" autocomplete="off" disabled/>
        </el-form-item>
        <el-form-item label="评论" :label-width="formLabelWidth" >
          <el-input v-model="AddCommentForm.content1" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addCommentVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddComment">
          提交
        </el-button>
      </span>
      </template>

    </el-dialog>
  </el-card>

</template>

<style scoped>

</style>